<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>ClusterMap Demo</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="figue.js" type="text/javascript"></script>
<script src="util.js" type="text/javascript"></script>
<script src="clustermap.js" type="text/javascript"></script>

<link rel="stylesheet" href="demo.css" type="text/css">

<script language="JavaScript">

var g_datasets = [ ["Choose a dataset", "Choose a dataset",0,0 , 0] ,
    ["Archeology in Germany" , "kml/archaeology.kml" , new google.maps.LatLng(51.364,4.735) , 6 , "http://www.dendrochronology.eu/archaeology.kml"] ,
    ["Some hotels in Firenze" , "kml/placemarks.kml" , new google.maps.LatLng(43.768118, 11.267) , 10, "http://www.es.itwg.com/citymap8/es/placemarks.kml" ] ,
    ["Velib Paris" , "kml/velib.kml" ,  new google.maps.LatLng(48.8662, 2.352) , 12 , "http://www.parisavelo.net/velib.kml"] 	,
    ["Nature preservation sites in the US (centered on Colorado)" , "kml/preserves.kml" ,  new google.maps.LatLng(44.27667, -90.7031, -1.2084) , 5 , "http://support.nature.org/xml/preserves.kml"] 		
    ] ;

    var g_map = null ;
    var g_hcmap = null ;

    function initialize() {
	    // initialize the main map
	    var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
	    }
	    g_map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


	    // create a menu containing some datasets
	    var map_selector = document.getElementById('map_selector') ;
	    for (var i = 0 ; i < g_datasets.length ; i++) {
		    var elOptNew = document.createElement('option');
		    elOptNew.text = g_datasets[i][0];
		    elOptNew.value = g_datasets[i][1] ;

		    try {
			    map_selector.add(elOptNew, null); // standards compliant; doesn't work in IE
		    }
		    catch(ex) {
			    map_selector.options.add(elOptNew); // IE only
		    }
	    }

    }

function viewOriginalDataset(){
	var map_selector = document.getElementById('map_selector') ;
	var selIndex = map_selector.selectedIndex;
	if (selIndex == 0) {
		alert ("Select a data set first.");
		return 
	}

	var dsurl = g_datasets[selIndex][4] ;
	var url = "http://www.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=" + dsurl + "&vps=1&sll=-33.84447,151.228231&sspn=0.035786,0.077162&ie=UTF8"
		window.open(url);
}

function changeMap() {
   if (document.URL.indexOf('http') != 0) {
     alert('You can only run this demo on a HTTP server.\n' +
           'This is because cross origin requests are only supported for HTTP\n' +
           'Look at offline-demo.html for an offline demo.');
     return;
   }

	var map_selector = document.getElementById('map_selector') ;
	var selIndex = map_selector.selectedIndex;
	if (selIndex == 0) 
		return ;

	var url = g_datasets[selIndex][1] ;
	var center = g_datasets[selIndex][2] ;
	var zm = g_datasets[selIndex][3] ;

	if (g_hcmap) {
		g_hcmap.removeMarkers() ;
		g_hcmap = null ;
	}

	g_map.setCenter(center) ;
	g_map.setZoom(zm) ;

	downloadUrl(url, function(xmldoc) {
			var elements = extractPointsFromKML(xmldoc);
			g_hcmap = new clustermap.HCMap ({'map': g_map , 'elements': elements}) ;
			});
}

function extractPointsFromKML(xmldoc) {
	var placemarks = xmldoc.documentElement.getElementsByTagName("Placemark");
	var elements = new Array;
	if (placemarks.length > 0) {
		var lat, lng, name, coordinates, point;
		for (var i = 0; i < placemarks.length; i++) {
			coordinates = placemarks.item(i).getElementsByTagName('coordinates').item(0).firstChild.nodeValue.split(","); ;
			name = placemarks.item(i).getElementsByTagName('name').item(0).firstChild.nodeValue ;
			lng = parseFloat (coordinates[0]) ; 
			lat = parseFloat (coordinates[1]) ;
			var coordinates = {'lat': lat, 'lng': lng};
			var element = {'label': name, 'coordinates': coordinates, 'color': 'green'} ;
			elements.push(element);
		}
		return elements;
	}
}
</script>

</head>

<body onload="initialize()" >

<div id="map_area">
<div id="map_selection" ><select id="map_selector" onchange="changeMap()"></select></div> <div id="original_dataset"><a href="javascript:void(0)" onclick="viewOriginalDataset()">View dataset without clustering</a></div>
<div id="map_canvas" class="map-large"></div> 
<div id="map_legend" class="map-legend"></div> 
</div>

<div id="footer">©2010 - Jean-Yves Delort</div>

</body>
</html>




